/**
 * 可配置图形空间
 * $('div').divContainer({args : {}});
 * 必须给出div元素
 * 入参args格式：
 * {
 *   id : 'id'
 * }
 * Created by 姚巨磊 on 2017-03-10.
 */
;
(function ($, window, document, undefined) {

    var app = require("public/app");
    var Gridster = require("jquery.gridster");

    /**
     * 插件对象
     * @param $ele jquery实例
     * @constructor
     */
    function Plugin($ele) {
        this.$element = $ele;
    }

    /**
     * 插件对象初始化方法
     * @param setting
     */
    Plugin.prototype._init = function (args) {
        var self = this;
        //准备数据
        var dataReady = app.getDataReady();
        dataReady.pushDataSource({
            url: app.urlBuild("/dirms/dev/graphs/getByNo/" + args["id"]),
            key: 'configData'
        });
        dataReady.once(function (readyData) {//所有数据源都加载后执行一次方法
            self.generateGrid(readyData);
        });

    };

    /**
     * 插入时间选择条
     */
    Plugin.prototype.generateDatePicker = function (config, i) {
        var timeElement = document.getElementsByClassName('wrapper')[i];
        var dateHtml = '<form><select class="custom-date" name="select" style="float: right;"> <option value="1" selected="selected">最近1天</option> <option value="3"  >最近3天</option> <option value="7">最近7天</option> <option value="30">最近1个月</option> <option value="90">最近3个月</option> <option value="custom">自定义</option> </select> </form>';
        var $date = $(dateHtml);
        $(timeElement).append($date);

        var picker = $date.find('.custom-date').dateRangePicker();
        return picker;
    }
    /**
     * 生成布局div
     */
    Plugin.prototype.generateGrid = function (data) {
        var $grid = $("<div class='gridster' width='100%' height='100%'><ul></ul></div>");
        this.$element.append($grid);
        var configData = data["configData"].data;
        var winWidth = $grid.width();
        var setWidth = Math.floor((winWidth - 50) / 4);
        var gridster = $grid.find("ul").gridster({    //通过jquery选择DOM实现gridster
            widget_base_dimensions: [setWidth, 217],    //模块的宽高 [宽,高]
            widget_margins: [5, 5],    //模块的间距 [上下,左右]
            min_cols: 4
        }).data('gridster');
        this.gridster = gridster;
        var self = this;
        $('.gridster').on('click', '.gs-refresh', function () {
            var $li = $(this).parents("li");
            self._loadChart($li, $li.data("form"));
        });
        this._loadGridster(eval('' + configData["widgetData"] + ''));

    };
    /**
     * 加载表格布局
     *
     * @param data
     * @private
     */
    Plugin.prototype._loadGridster = function (initData) {
        var self = this;
        self.gridster.remove_all_widgets(null);
        if (initData) {
            //注意：Gridster首字母必须大写；先按row排序，row相同的再按列排序，按排序后的顺序插入data可以保证位置不会偏移
            var data = Gridster.sort_by_row_and_col_asc(initData);
            //alert("排序后的widget:\n" + JSON.stringify(data));
            for (var i = 0; i < data.length; i++) {
                var wrapper = $('<li></li>');

                wrapper.append('<a href="javascript:;" class="gs-refresh"><i class="fa fa-refresh"></i></a>'
                + '<div style="text-align: center; height: 98%;width: 100%">'
                + '<div id="content" style="height: 100%;width: 100%"></div></div>');
                self.gridster.add_widget(wrapper, data[i].size_x, data[i].size_y, data[i].col, data[i].row);
                self._loadChart(wrapper, data[i]["form"]);
            }
        }
    }
    /**
     * 渲染容器里面的图形
     *
     * @param $el
     * @param form
     * @private
     */
    Plugin.prototype._loadChart = function ($el, form) {
        $el.data("form", form);
        //渲染图表
        $el.find("#content").chartLoader(form);
    },

    /**
     * 插件发布的方法
     * @type {string[] 数组元素=Plugin的方法名}
     */
        Plugin.publicMethods = [];

    /**
     * 定义jquery插件
     * @returns {$.fn}
     */
    $.fn.divContainer = function () {
        var userArgs = arguments;//用户调用$("selector").erTab()时传入的参数。此处保存下来，以便在下面的each中使用。
        var eachResult = [];//下面的each中，每次调用时返回的值
        var pluginArray = [];//避免多个对象覆盖问题，pluginArray不作为全局变量

        this.each(function () {//循环处理每个jquery元素
            var $this = $(this);//注意，进入each方法后，需要$(this)包裹一下才是jquery对象

            //根据元素id从插件实例数组中筛选出已经创建的插件对象，如果元素未创建实例，则初始化一个，并增加到pluginArray。使用插件对象的目的是可以保持插件状态
            var plugin = $.grep(pluginArray, function (item, index) {
                return item['key'] === $this.attr("id");
            });
            if (plugin.length === 1) {
                plugin = plugin[0].value;
            } else {
                plugin = new Plugin($this);
                pluginArray.push({
                    key: $this.attr("id"),
                    value: plugin
                })
            }

            var args = $.merge([], userArgs);//复制一份userArgs。因为下面会改变这个数组
            var method = args[0];//需要执行的方法。如果用户需要执行插件中的某个方法，则方法名应该在第一个参数。如$("").erTab("addTab" , {});

            //解析应该调用的插件方法
            if ($.grep(Plugin.publicMethods, function (item) {//用户调用形式如$("").erTab("addTab")或$("").erTab("addTab" , {})时，将调用用户指定的插件方法
                    return item === method;
                }).length === 1) {
                method = plugin[method];//method设置为plugin中的方法
                args = Array.prototype.slice.call(args, 1);//方法参数。当前用户调用形式下，从第二个输入参数开始，都是方法的执行参数
            } else if (typeof(method) === 'object' || !method) {//用户调用形式如$("").erTab()或$("").erTab({})时，直接执行init方法，初始化插件
                args = userArgs;
                method = plugin._init;
            } else {//用户希望调用插件中的方法，但给出的方法名不正确，则抛出错误
                $.error('Method ' + method + ' does not exist on jQuery.headMenu');
            }

            //执行插件方法
            var methodResult = method.apply(plugin, args);

            //如果插件方法有返回值，则存储到eachResult
            if (methodResult !== undefined) {
                eachResult.push(methodResult);
            }
        });

        //如果eachResult有值，则返回eachResult，否则返回jquery元素本身（即this）
        return eachResult.length === 0 ? this : eachResult.length === 1 ? eachResult[0] : eachResult;
    }
})(jQuery, window, document);